<template>
  <div class="fendian">
    <div class="diqu">
      <div class="xuan">选择地区</div>
      

      <div class='shiqu'>
         

          <van-field
            class='dianji'
            readonly
            clickable
            label=""
            :value="value[0]+value[1]"
            placeholder="请选择地区"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @cancel="showPicker = false"
              @confirm="onConfirm"
              @change="onChange"
            />
          </van-popup>

         


        <div v-if='valuefendian==""'>请选择地区</div>
        <div v-if='valuefendian!=""'>{{valuefendian}}</div>

        <!-- <input style='text' placeholder='请选择地区' v-model='valuefendian' /> -->
        <!-- <div>请选择地区</div> -->
        <img src="../../assets/img/ckgd.png" alt="">
      </div>

     
    </div>
    
    <div class="gray"></div>
    <div class="boxnr">
      <div class="item" v-for="(item,index) in list" 
                        :key='index'
                        >
        <img :src="item.stores_logo"/>
        <p class="p1">{{item.stores_name}}</p>
        <p class="p2">电话：{{item.mobile}}</p>
        <p class="p3">地址：{{item.stores_address}}</p>
      </div>
      <div class="zanwunr" v-if='list.length==0'>
        暂无搜索内容
      </div>
    </div>
  </div>
</template>

<script>
  // const citys = {
  //   '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
  //   '福建': ['福州', '厦门', '莆田', '三明', '泉州']
  // };


  export default {
    data() {
      return {
        provinceid:'',
        cityid:'',
        citys:'',
        list:'',
        currentdiqu:'选择地区',
        value: ["",""],
        showPicker: false,
        columns: '',
        valuefendian:''
      }
    },
    methods: {

      onChange(picker, values) {
        // console.log(picker,values)
          // console.log(picker.getColumnIndex())

        // picker.setColumnValues(1, this.citys[values[0]]);
        for (const key in this.citys) {
            if(values[0]==this.citys[key].region_name){
             
              var city2=[]
              for (const x in this.citys[key].data) {
                city2.push(this.citys[key].data[x].region_name)
              }
              console.log(city2)
              picker.setColumnValues(1, city2);
              
            }
        }
      },

      onConfirm(values) {
        this.value = values;
        this.showPicker = false;
         // picker.setColumnValues(1, this.citys[values[0]]);
        for (const key in this.citys) {
            if(values[0]==this.citys[key].region_name){
              this.provinceid=this.citys[key].region_id

              for (const x in this.citys[key].data) {
                if(values[1]==this.citys[key].data[x].region_name){
                  this.cityid=this.citys[key].data[x].region_id
                }
              }
            }
        }

        this.valuefendian=this.value[0]+this.value[1]

        this.getfendianlist()
      },
      getfendianlist(){
        this.$get("api/gzh_index.php?action=store_list", {
          province:this.provinceid,
          city:this.cityid
        }).then(res => { 
          console.log(res.data,'res')
          this.list=res.data
        }).catch(err => {
          
        });
      },
      getshengshiqu(){
        // api/gzh_index.php?action=region_list
        this.$get("api/gzh_index.php?action=region_list", {
          
        }).then(res => { 
          console.log(res.data,'res')
          this.citys=res.data
          var city1=[]
          var city2=[]
          for (const key in res.data) {
            city1.push(res.data[key].region_name)
            // city1.push('aaa')
          }
          for (const key in res.data[0].data) {
            city2.push(res.data[0].data[key].region_name)
          }

          this.columns=[
            {
              values: city1,
              className: 'column1'
            },
            {
              values: city2,
              className: 'column2',
              defaultIndex: 0
            }
          ]
        }).catch(err => {
          
        });
      }
    },
    created () {
      console.log(this.columns)
      this.getfendianlist();
      this.getshengshiqu()
    },
  }
</script>

<style scoped>
.dianji{
  width:100%;
  height:100%;
  opacity:0;
  position:absolute;
  top:0;
  left:0;
  
}
.fendian{
  width: 100%;
}
.diqu{
  width: 100%;
  height: 81px;
  border-top: 1PX solid #EFEFEF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  box-sizing: border-box;
}
.xuan{
  font-size:32px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:36px;
}
.shiqu{
  display: flex;
  align-items: center;
  justify-content:flex-end;
  position:relative;
}
.shiqu div{
  font-size:32px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(6,162,85,1);
  line-height:36px;
  margin-right: 27px;
}
.shiqu img{
  width: 12px;
  height: 22px;
}
.gray{
  width: 100%;
  height: 3px;
  background: #F8F8F8;
}
.item{
  width:100%;
  /* height:433px; */
  background:rgba(255,255,255,1);
  padding: 0 30px;
  box-sizing: border-box;
  border-bottom: 2px solid #F8F8F8;
}
.item img{
  width:689px;
  /* height:263px; */
  border-radius:12px;
  margin-top: 15px;
}
.p1{
  font-size:32px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgb(22, 22, 22);
  line-height:36px;
}
.p2{
  font-size:26px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:36px;
  margin-top: 11px;
  margin-bottom: 11px;
}
.p3{
  font-size:26px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:36px;
}
.boxnr{
  width:100%;
  height:calc(100vh - 84px);
  overflow: hidden;
  overflow: scroll;
}
.zanwunr{
  width:100%;
  text-align: center;
  font-size: 16px;
  color: #999;
  margin-top:50px;
}
</style>
<style >
 
  .van-field__control{
    text-align: end!important;
  }
  /* .van-field__control */
</style>